<template>
  <ScreenLayoutWithMenu title="数据可视化大屏 - 库存管理">
    <!-- KPI统计数据行 -->
    <div class="kpi-section">
      <KPICard label="日销量" value="4,712" />
      <KPICard label="库存总量" value="140,735" />
      <KPICard label="期初库存" value="271,183" />
      <KPICard label="期末库存" value="140,735" />
      <KPICard label="库存周转率" value="0.73" orange />
      <KPICard label="库存覆盖天数" value="43.7" green />
    </div>

    <!-- 图表区域 -->
    <div class="screen-grid grid-inventory">
      <ChartCard title="库存覆盖天数与周转率" grid-area="a">
        <ECharts :option="coverageTurnoverOption" />
      </ChartCard>
      <ChartCard title="品类库存与覆盖天数" grid-area="b">
        <ECharts :option="categoryCoverageOption" />
      </ChartCard>
      <ChartCard title="品类库存与周转率" grid-area="c">
        <ECharts :option="categoryTurnoverOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import KPICard from '../components/KPICard.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import * as echarts from 'echarts'
import './Screen.css'

const coverageTurnoverOption = ref({})
const categoryCoverageOption = ref({})
const categoryTurnoverOption = ref({})

onMounted(() => {
  // 库存覆盖天数与周转率
  coverageTurnoverOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['库存覆盖天数', '月库存周转次数'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '库存覆盖天数',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '月库存周转次数',
        min: 0,
        max: 200,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff', formatter: '{value}%' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '库存覆盖天数',
        type: 'bar',
        data: [35, 38, 30.36, 40, 42, 39, 26.55, 41],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        }
      },
      {
        name: '月库存周转次数',
        type: 'line',
        yAxisIndex: 1,
        data: [153.72, 122.40, null, 129.24, 91.52, 87.64, null, 78.84],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800',
          formatter: '{c}%'
        }
      }
    ]
  }

  // 品类库存与覆盖天数
  categoryCoverageOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['库存数量', '库存覆盖天数'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['Antibiotics', 'Antiviral', 'Painkillers'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '库存数量',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '库存覆盖天数',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '库存数量',
        type: 'bar',
        data: [45000, 38000, 57735],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        }
      },
      {
        name: '库存覆盖天数',
        type: 'line',
        yAxisIndex: 1,
        data: [9.7, 11.3, 28.2],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800'
        }
      }
    ]
  }

  // 品类库存与周转率
  categoryTurnoverOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['库存数量', '库存周转次数'],
      textStyle: { color: '#fff' },
      top: 10
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['Antibiotics', 'Antiviral', 'Painkillers'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '库存数量',
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '库存周转次数',
        min: 0,
        max: 1,
        axisLine: { lineStyle: { color: '#1890ff' } },
        axisLabel: { color: '#fff' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '库存数量',
        type: 'bar',
        data: [45000, 38000, 57735],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        }
      },
      {
        name: '库存周转次数',
        type: 'line',
        yAxisIndex: 1,
        data: [0.72, 0.77, 0.76],
        lineStyle: { color: '#ff9800', width: 2 },
        itemStyle: { color: '#ff9800' },
        label: {
          show: true,
          position: 'top',
          color: '#ff9800'
        }
      }
    ]
  }
})
</script>

